﻿@model Developer.Entity.Books

@{
    ViewBag.Title = "Detail";

    Session["LoginUser"] = "1";
    Layout = "~/Views/Shared/_UILayout.cshtml";
}
<style>
    button{
        border: none;
        height: -1px;
        color: blue;
    }

</style>
<style>
    #reply-write {
        display: block;
        width: 100%;
        border: none;
        font-size: 1em;
        line-height: 20px;
        margin: 0;
        padding: 0.3em;
        resize: none;
        font-family: inherit;
        color: inherit;
        box-sizing: border-box;
        border: 1px solid #FE0002;
        border-radius: 4px 0 0 4px;
    }

    .send-btn {
        float: left;
        width: 17%;
    }

    #conts p {
        display: inline-block;
        padding: 3px 0px 3px 0px;
        margin: 0px;
    }

    .dm .d_screen #showmeg p {
        font-weight: bold;
        text-align: center;
    }

    #audio_btn {
        position: absolute;
        top: 0px;
        left: 0px;
        z-index: 999999;
    }

    #conts {
        margin: 0 auto;
        padding-left: 2%;
        padding-right: 2%;
        height: 205px;
    }

    .NYwishes .send {
        position: absolute;
        left: 0%;
        bottom: 0px;
        height: 40px;
        width: 100%;
        z-index: 99999;
    }

        .NYwishes .send .input {
            width: 58%;
            float: left;
            margin-left: 2%;
        }

    .NYwishes .send-btn a {
        background-color: #ff4081;
        color: #fff;
        width: 80px;
        height: 30px;
        display: inline-block;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
        border-radius: 0 4px 4px 0;
    }
</style>
<link href="~/Content/UI/css/swiper.min.css" rel="stylesheet"/>
<div class="mui-card mdui-shadow-9">
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
           <h3 style="color:#747478;">「@Model.Name」</h3>
            <input type="hidden" value="@Model.Id" id="id"/>
        </div>
    </div>
</div>
<div class="mui-card mdui-shadow-9">
    <div class="mui-card-header mui-card-media" style="height:40vw;background-image:url(@Model.CoverImg)"></div>
    <div class="mui-card-content">
        <div class="mui-card-content-inner">
            <p>@Model.Author</p>
            <p><span id="fav_count">@Model.Favorites.Count </span>次收藏</p>
            <input type="hidden" id="fa_count_input" value="@Model.Favorites.Count"/> 
            <p style="color: #333;"><strong>简介: </strong>@Model.Description</p>
            <p>ISBN: @Model.ISBN</p>
        </div>
    </div>
    <div class="mui-card-footer">
        <button id="order" style="height:-1px" onclick="order(1)">预定</button>
        <button id="fav" style="height:-1px" onclick="favorite(1)">收藏</button>
    </div>
</div>
<div class="" style="margin-top:20px">
    <div class="NYwishes">

        <div class="swiper-container">
            <div id="conts">
                <div class="dm">
                    <!--d_screen start-->
                    <div class="d_screen">
                        <div class="d_mask"></div>
                        <div class="d_show">
                            <div></div>
                            <div></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="send">
            <div class="input">
                <input id="reply-write" name="content" type="text" value="" placeholder="写下你的评论" style="height:30px">
            </div>
            <div class="send-btn">
                <a onClick="send_reply2()" id="send">发送</a>
            </div>
        </div>
    </div>		
</div>
<script src="~/Content/scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Content/UI/js/swiper.min.js"></script>
@{ 
    var js_content_comments = Model.Comments;
    var js_content_comment = string.Empty;
    int i = 1;
    foreach (var comment in js_content_comments)
    {
        js_content_comment += "{'id':" + i++ + ",'val':'" + comment.Contents + "','img':'" + comment.Users.HeadImg+ "'},";
    }
    var c = js_content_comment;
}
<script>
    var headImg = "";
    var date = [@Html.Raw(js_content_comment)];
    $(document).ready(function () {
        if (typeof (localStorage.user) == 'undefined') {
            $('.send').remove();
        } else {
            var UID = localStorage.user;
            $.ajax({
                url: '/Index/GetUserHead',
                dataType: 'Json',
                type: 'POST',
                data: { 'UID': UID },
                success: function (data) {
                    headImg = data["head"];
                }
            });
        }
    });
    $('#send').on('tap',function () {
        send_reply2();
    });
    function send_reply2() {
        var content = $("#reply-write").val();
        if ($.trim(content) == "") {
            alert("请写下评论");
            return false;
        }
        var text = $("#reply-write").val();
        input(text, headImg);
        date.push("{'id':" + date.length++ + ",'val':'" + text + "','img':'" + headImg + "'},");
        $("#reply-write").val("");
        init_screen();
        if ($(".d_show").height() > 180) {
            $($(".d_show").children("div").get(0)).toggle(1500);
            $($(".d_show").children("div").get(0)).remove();
        }
        $.ajax({
            type: 'POST',
            dataType: 'Json',
            url: '/Comment/ToComment',
            data: { 'uid': localStorage.user, 'bid': '@Model.Id', 'contents': text },
            success: function (data) {
                if (data.hasOwnProperty('error')) {
                    mdui.snackbar({
                        message: data['error']
                    });
                }
            }
        });
    }
    $(function () {

        var i = 0;
        setInterval(function () {
            if ($(".d_show").height() < 100) {
                if (i < date.length) {
                    input(date[i].val, date[i].img)
                    i++;
                } else {
                    i = 0
                    input(date[i].val, date[i].img)
                    i++;
                }
            } else {
                init_screen();
                $($(".d_show").children("div").get(0)).remove();
                if (i < date.length) {
                    input(date[i].val, date[i].img)
                    i++;
                } else {
                    i = 0
                    input(date[i].val, date[i].img)
                    i++;
                }
            }
        }, 1500);

        $("#reply-write").keyup(function (ev) {
            var ev = ev || event;
            if (ev.keyCode == 13) {
                send_reply2();
            }
        });
    })
    function init_screen() {
        $(".d_show").find("div").show().each(function () {
            setInterval(function () {
                $($(".d_show").children("div").get(0)).toggle(1500);
            }, 1500);
        });
    }
    function input(val, img) {
        var div = $("<div class='mdui-chip'><img class='mdui-chip-icon' src='" + img + "'/>  <span class='mdui-chip-title'>" + val + "</span></div></div>");
        $(".d_show").append(div.fadeIn(1500));
    }
</script>

<script>

    $(function () {
        var id = $('#id').val();
      //  document.getElementById("order").addEventListener('tap', function (event) {
            
      //      order(id);
      //  }, false);
      //  document.getElementById("fav").addEventListener('tap', function (event) {
           
      //    favorite(id);
      //}, false);
       
    });


    function order(bid) {
        bid = $('#id').val();
            if (typeof (localStorage.user) == 'undefined') {
                //未登录
                mdui.snackbar({
                    message: '请先登录！',
                    buttonText: '登陆',
                    onClick: function () {
                        self.location = "/account/login";
                    },
                    onButtonClick: function  () {
                        self.location = "/account/login";
                    },
                    onClose: function  () {
                        self.location = "/account/login";
                    }
                });
            } else {
                var uid = localStorage.user;
                $.ajax({
                    url: '/Book/AddOrder',
                    dataType: 'Json',
                    type: 'POST',
                    data: { 'uid': uid, 'bid': bid },
                    success: function (data) {
                        if (data.hasOwnProperty('error')) {
                            mdui.snackbar({
                                message: data['error']
                            });
                            return;
                        } else {
                            mdui.snackbar({
                                message: "预订成功！"
                            });
                        }
                    },
                    error: function(){
                        mdui.snackbar({
                            message: '未知错误，请检查网络连接'
                        });
                    }
                });
            }
    }

    function favorite(bid) {
        bid = $('#id').val();
        if (typeof (localStorage.user) == 'undefined') {
            //未登录
            mdui.snackbar({
                message: '请先登录！',
                buttonText: '登陆',
                onClick: function () {
                    self.location = "/account/login" ;
                },
                onButtonClick: function () {
                    self.location = "/account/login" ;
                },
                onClose: function () {
                    self.location = "/account/login" ;
                }
            });
        } else {
            var uid = localStorage.user;
            $.ajax({
                url: '/Book/AddFav',
                dataType: 'Json',
                type: 'POST',
                data: { 'uid': uid, 'bid': bid },
                success: function (data) {
                    if (data.hasOwnProperty('error')) {
                        mdui.snackbar({
                            message: data['error']
                        });
                        return;
                    } else {
                        var fav_count = parseInt($('#fav_count_input').val());
                        $('#fav_count').html(fav_count++);
                        mdui.snackbar({
                            message: "成功添加至我的收藏"
                        });
                    }
                },
                error: function () {
                    mdui.snackbar({
                        message: '未知错误，请检查网络连接'
                    });
                }
            });
        }
    }
</script>